var page = 1;
var limit = 18;
var level = 1;
var status = 0;
total = 0;

//init
function initMyChart(dom) {
    return echarts.init(dom);
}

//set内容
function setMyOption(myChart,option) {
    myChart.setOption(option);
}

function setOptionLists(optionLists) {
    optionListEnd = optionLists;
}

function disposeOptionLists($jQuery) {
    // 销毁之前的echarts实例
    // echarts.dispose(dom);
    // $jQuery("div").remove(".imgMyChart");
    // $jQuery("div").remove(".MSContentBox");
}

function getTotal($jQuery,laypage,flg) {
    var param;
    if(flg == "init"){
        var proId = window.localStorage.getItem("proId");
        param = {
            proId:proId,
            level:level,
            statu:status,
            start:page,
            limit:limit
        };
    }else {
        var conId = window.localStorage.getItem("conId");
        param = {
            conIdList:[conId],
            level:level,
            statu:status,
            start:page,
            limit:limit,
			
        };
    }
	
	var  data =JSON.stringify(param);
    $jQuery.ajax({
        url: getIP() + '/imgProgress/proRate',
        type: 'post',
        contentType:'application/json',
        dataType:"json",
        data:data,
        success: function (data) {
            if (data.code == "succee") {
				// var   data = data.data;
			    console.log(data)
                laypage.render({
                    elem: 'laypage',
                    count: data.total,
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                    limit:limit,
                    limits:[18,12,6],
                    jump: function(obj,first){
                        console.log(obj.limit)//curr limit
                        limit = obj.limit;
                        page = obj.curr;
                        //首次不执行
                        if(!first){
                            if(level == 1){
                                reload($jQuery,laypage);
                            }else if(level > 1){
                                var conId = window.localStorage.getItem("conId");
                                ZQRequest($jQuery,conId,laypage)
                            }
                        }
                    }
                });
				
            }
        }
    });
}

function layPageRender(laypage,total,$jQuery) {

}
function setLineColor(value) {
    var n = value/100
    if(value <= 0){
        ec_bgColor  =  [ [1,
            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                    offset: 0.5,
                    color: "#D01441"
                },

                {
                    offset: 1,
                    color: "#DB2A54"
                }
            ])
        ],
        ]
        textStyle = {
            color: '#DA2852',
            backgroundColor: 'rgba(218, 41, 83, 0.49)',
            fontSize: 12,
            borderColor:'#DA2852',
        }
    }else if(value >= 100){
        ec_bgColor  = [ [n,
            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                    offset: 0.5,
                    color: "#0336FF"
                },

                {
                    offset: 1,
                    color: "#01B4FF"
                }
            ])
        ]
        ]
        textStyle = {
            color: '#5D92FF',
            backgroundColor: 'rgba(8, 9, 126, 0.49)',
            fontSize: 12,
            borderColor:'#1B1FFF',
        }
    }else if(value > 0 && value < 100){
        ec_bgColor  = [
            [n,
                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                        offset: 0.5,
                        color: "#FF5B1F"
                    },

                    {
                        offset: 1,
                        color: "#FFC21F"
                    }
                ])
            ],
            [1,"#262795"]
        ]
        textStyle = {
            color: '#FF8D1F',
            backgroundColor:'#5A365B',
            fontSize: 12,
            borderColor:'#FF6D1F',
        }
    }
}
function setHtmlDom(laypage,data,$jQuery) {
    var  fhBox = document.getElementById("fhBox")
    var dataRows = data;
    for (var t = 0; t < dataRows.length; t++) {
		console.log(dataRows[t])    
        setLineColor(dataRows[t].ratio);
        var conname = dataRows[t].conname;
        if(conname){
            conname = conname.substring(0,7)+"...";
        }else{
            conname = "";
            }
        var	option = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },
            toolbox: {
                feature: {
                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [
                {
                    //类型
                    type: 'gauge',
                    //半径
                    radius: 80,

                    //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                    startAngle: 210,
                    //结束角度。
                    endAngle: -30,
                    center: ['50%', '60%'],
                    //仪表盘轴线相关配置。
					
                    axisLine: {
                        show: true,
                        // 属性lineStyle控制线条样式
                        lineStyle: {
                            width: 15,
                            color:ec_bgColor
                        }
                    },
                    //分隔线样式。
                    splitLine: {
                        show: false,
                    },
                    //刻度样式。
                    axisTick: {
                        show: false,
                    },
                    //刻度标签。
                    axisLabel: {
                        show: false,
                    },
                    //仪表盘指针。
                    pointer: {
                        show: false,
                        //指针长度
                        length: '90%',
                        width: 7,
                    },
                    //仪表盘标题。
                    title: {
                        show: true,
                        offsetCenter: [0, '68%'], // x, y，单位px
                        width:120,
                        height:30,
                        lineHeight:30,
                        borderWidth:1,
                      
                        // shadowBlur:44,
                        borderRadius:10,
                        textStyle:textStyle,
                      
                        rich : {
                            score : {
                                color : "#fff",
                                fontSize : 17,
                                padding:0
                            }
                        }
                    },
                    //仪表盘详情，用于显示数据。
                    detail: {
                        show: true,
                        offsetCenter: [0, 0],
                        formatter: '{value}%',
                        color : "#fff",

                        textStyle: {
                            fontSize: 30,
                            color: '#169FFE',
                        }
                    },
                    data: [
                        {value:dataRows[t].ratio,name:conname}
                    ]
                }]
        };
        var oDiv = document.createElement("div");
        oDiv.id = 'box'+t;
        oDiv.className = 'myChartItem';
        fhBox.appendChild(oDiv);
        var boxT = document.getElementById('box'+t);
		var myChart; 
	
			  myChart = initMyChart(boxT);
			  setMyOption(myChart,option);
	
       

        

        boxT.addEventListener('click',function () {
		    //显示返回按钮
		   var  domDivBox = document.querySelector(".fanhuiBtn");
		   domDivBox.style="display:block";
		   var  htBox = document.getElementById("htBox");
		   var  val = dataRows[$jQuery(this).index()].conname+dataRows[$jQuery(this).index()].ratio+"%";
		        htBox.innerHTML = "-"+val;	   
            level++;
            var conId = dataRows[$jQuery(this).index()].conid;
            ZQRequest($jQuery,conId,laypage);
            window.localStorage.setItem("conId",conId);
            getTotal($jQuery,laypage,"ZQClick");
        });
        boxT.onmouseover = function(e){
            var mouseId = e.currentTarget.id
            var mouseIndex = mouseId.substring(3,mouseId.length);
            var msg = "总量："+dataRows[mouseIndex].price+"万<br>完成："+dataRows[mouseIndex].money+"万<br>"+dataRows[mouseIndex].conname;
            layer.tips(msg, "#"+mouseId,{tips: 2,time:-1});
        }
        boxT.onmouseout = function () {
            layer.closeAll('tips');
        }
    }
    pageStatus = "reload";
}


function ZQRequest($jQuery,conId,laypage) {
	debugger
    var param = {
        "conIdList":[conId],
        "level":level,
        "statu":status,
        "start":page,
        "limit":limit
    };
    var params = JSON.stringify(param);
    console.dir(params)
    $jQuery.ajax({
        url: getIP() + '/imgProgress/proRate',
        type: 'post',
        contentType:'application/json',
        dataType:"json",
        data:params,
        success: function (data) {
            $jQuery("div").remove(".myChartItem");
            if (data.code == "succee") {
			
				console.log(data.data)
                setHtmlDom(laypage,data.data,$jQuery);
            }
        }
    });
}

function reload($jQuery,laypage) {
    var proId = window.localStorage.getItem("proId");
  // var proId = "10072A83-AF57-4C59-907A-9837787CC3DB";
	 var param ={
		  "proId":proId,
		  "level":level,
		  "statu":status,
		  "start":page,
		  "limit":limit
	  }
  var  param =JSON.stringify(param);
    $jQuery.ajax({
        url: getIP() + '/imgProgress/proRate',
        type: 'post',
        contentType:'application/json',
        dataType:"json",
        data:param,
        success: function (data) {
			console.log(data)
			var  item = data.data;
            $jQuery("div").remove(".myChartItem");
            if (data.code == "succee") {
                setHtmlDom(laypage,item,$jQuery);
            }
        }
    });
}


function backPross(layer,laypage,$jQuery){
    if(level <= 1){
        layer.msg("已是最高级...");
		 document.querySelector(".fanhuiBtn").style="display:none";
		// var conId = window.localStorage.getItem("conId");
		 getTotal($jQuery,laypage,"ZQClick");
		 reload($,laypage);
		
		
    }else if(level > 2){
        level--;
        // getTotal($jQuery,laypage,"backPross");
        var conId = window.localStorage.getItem("conId");
        var param = {
            "conIdList":[conId],
            "level":level,
            "statu":status,
            "start":page,
            "limit":limit
        };
        $jQuery.ajax({
            url: getIP() + '/imgProgress/proRate',
            type: 'post',
            contentType:'application/json',
            dataType:"json",
            data:JSON.stringify(param),
            success: function (data) {
                $jQuery("div").remove(".myChartItem");
                if (data.code == "succee") {
                    setHtmlDom(laypage,data.data,$jQuery);
                }
            }
        });
    }else if(level == 2){
         document.querySelector(".fanhuiBtn").style="display:none";
		level--;
        // getTotal($jQuery,laypage,"init");
        var proId = window.localStorage.getItem("proId");
        var param = {
            proId:proId,
            level:level,
            statu:status,
            start:page,
            limit:limit
        }
        $jQuery.ajax({
            url: getIP() + '/imgProgress/proRate',
            type: 'post',
            contentType:'application/json',
            dataType:"json",
            data:JSON.stringify(param),
            success: function (data) {
                var item = data.data;
                $jQuery("div").remove(".myChartItem");
                if (data.code == "succee") {
                    setHtmlDom(laypage,item,$jQuery);
                }
            }
        });
    }
}


